<template>
    <div class="home">
    <el-container style="height: 100%;">
        <Aside :isCollapse="isCollapse" /> 
    <el-container class="content">
      <el-header><Header :isCollapse="isCollapse" @toggle-collapse="toggleCollapse"/></el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script>
import Aside from "../components/common/Aside.vue";
import Header from "../components/common/Header.vue";

export default {
  components: {
    Aside,
    Header,
    // Footer,
    // Menu,
    // Breadcrumb
  },
  data() {
    return {isCollapse: false};
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style scope>
.home {
  width: 100%;
  height: 100vh;
}
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>